<template>
  <div style="padding: 10px;">
    <Row label="字段标题" :required="true">
      <a-input v-model="fieldConfig.label"/>
    </Row>

    <Row label="字段名称" :required="true">
      <a-input v-model="fieldConfig.fieldName"/>
    </Row>

    <Row label="输入提示">
      <a-input v-model="fieldConfig.placeholder"/>
    </Row>

    <Row label="金额范围">
      <div style="display: flex; align-items: center">
        <MoneyInput v-model="fieldConfig.minValue" style="flex: 0.5"/>
        ~
        <MoneyInput v-model="fieldConfig.maxValue" style="flex: 0.5"/>
      </div>
    </Row>

    <Row :inline="true" label="是否显示零">
      <div style="display: flex; padding-top: 5px">
        <a-checkbox :checked="showZero" @click="() => showZero = !showZero"/>
      </div>
    </Row>

    <Row :inline="true" label="大写金额">
      <div style="display: flex; padding-top: 5px">
        <a-checkbox :checked="showUppercase" @click="() => showUppercase = !showUppercase"/>
      </div>
    </Row>

    <FieldValueFormulaGroups :fieldConfig="fieldConfig" :formDefinition="formDefinition"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createField, createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';
import MoneyInput from '@comp/hhd/design/FormField/fields/MoneyInput.vue';
import FieldValueFormulaGroups
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/FieldValueFormulaGroups.vue';

function createMoneyField() {
  let res = createField();
  res.component = 'money';
  return res;
}

export default {
  name: 'MoneyConfig',
  components: {FieldValueFormulaGroups, MoneyInput, Row},
  props: {
    fieldConfig: createProps(Object, createMoneyField),
    formDefinition: createProps(Object, createFormDefinition),
  },
  computed: {
    showUppercase: {
      get() {
        try {
          return !!this.fieldConfig.exts.showUppercase;
        } catch (e) {
        }
        return false;
      },
      set(v) {
        let exts = this.fieldConfig.exts || {};
        this.$set(this.fieldConfig, 'exts', exts);
        this.$set(exts, 'showUppercase', v);
      }
    },
    showZero: {
      get() {
        try {
          return !!this.fieldConfig.exts.showZero;
        } catch (e) {
        }
        return false;
      },
      set(v) {
        let exts = this.fieldConfig.exts || {};
        this.$set(this.fieldConfig, 'exts', exts);
        this.$set(exts, 'showZero', v);
      }
    },
  }
};
</script>
